<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>抢红包</title>  
    <link rel="stylesheet" href="./css/index.css" /> 
  </head> 
  <body> 
    <div id="app">  
        <div class="computed">
            <div class="subtitle">拼手气红包</div>
            <div class="row">
                <div class="content">红包个数</div>
                <div class="in">
                    <input type="text" id="inCount" class="input" placeholder="填写个数">个
                </div>
            </div>
            <div class="row">
                <div class="content">总金额</div>
                <div class="in">
                    <label for="inMoney">￥</label>
                    <input type="text" id="inMoney" class="input" placeholder="0">
                </div>
            </div>
            <div class="btn">塞钱进红包</div>
        </div>
        <div class="redEnvelope"> 
            <div class="top"></div>
            <div class="title">恭喜发财，大吉大利</div>
            <div class="pic"></div>
            <div id="open">開</div> 
        </div> 
        <div class="result"></div>
        </div>
    </div> 
    <script> 
	    // 获取DOM元素对象 
        const open = document.getElementById('open') 
        const inCount = document.getElementById('inCount') 
        const inMoney = document.getElementById('inMoney')  
        const redEnvelope = document.querySelector('.redEnvelope') 
        const computed = document.querySelector('.computed') 
        const result = document.querySelector('.result') 
        const btn = document.querySelector('.btn') 

        btn.onclick = () => {
            computed.style.display = 'none'; 
            redEnvelope.style.display = 'block';
        } 
        open.onclick = () => {
            redEnvelope.style.display = 'none';
            let length = Number(inCount.value);
            let total = Number(inMoney.value);
            console.log(total,length);
            const moneyArr = randAlloc(total, 1, 12, length) 
            moneyArr.forEach((item, index) => {
                result.innerHTML += `<div class="list"><div class="left">小蓝${index+1}号</div><div class="right">${item}元</div>`
            })
        } 
        
        // TODO 待补充的代码
        function randAlloc(total = 200, min = 1, max, length = 10) {
            // 首先要判断是否符合 min 和 max 条件
            if (min * length > total || max * length < total) {
                throw Error(`没法满足最最少 ${min} 最大 ${max} 的条件`);
            } 
            const result = [];
            let restValue = total;
            let restLength = length;
            for (let i = 0; i < length - 1; i++) {
                restLength--;
                // 这一次要发的数量必须保证剩下的要足最小量
                // 同进要保证剩下的不能大于需要的最大量
                const restMin = restLength * min;
                const restMax = restLength * max;
                // 可发的量
                const usable = restValue - restMin;
                // 最少要发的量
                const minValue = Math.max(min, restValue - restMax);
                // 以 minValue 为最左，max 为中线来进行随机，即随机范围是 (max - minValue) * 2
                // 如果这个范围大于 usable - minValue，取 usable - minValue
                const limit = Math.min(usable - minValue, (max - minValue) * 2);
                // 随机部分加上最少要发的部分就是应该发的，但是如果大于 max，最大取到 max
                result[i] = Math.min(max, minValue + Math.floor(limit * Math.random()));
                restValue -= result[i];
            }
            result[length - 1] = restValue;

            return result;
        }
    </script>
  </body>
</html>
